// 主色调 - 基于国家电网的蓝色系
$primary-color: #2b7de1; // 主蓝色
$primary-light: #e8f3ff; // 浅蓝色
$primary-dark: #1e5bbf; // 深蓝色
$primary-hover: #4b8fe5; // 悬浮蓝色
$primary-active: #1e5bbf; // 激活蓝色
$primary-bg: #f0f7ff; // 背景蓝色

// 功能色
$success-color: #00b42a; // 成功色
$success-light: #e8ffea; // 浅成功色
$warning-color: #ff7d00; // 警告色
$warning-light: #fff3e8; // 浅警告色
$error-color: #f53f3f; // 错误色
$error-light: #ffe8e8; // 浅错误色

// 中性色
$text-color: #1d2129; // 主要文本
$text-color-secondary: #4e5969; // 次要文本
$text-color-tertiary: #86909c; // 辅助文本
$border-color: #e5e6eb; // 边框色
$divider-color: #f2f3f5; // 分割线
$hover-color: #f2f3f5; // 悬浮背景色

// 背景色
$bg-color: #f7f8fa; // 页面背景
$bg-color-secondary: #ffffff; // 卡片背景
$header-bg: #ffffff; // 头部背景
$sider-bg: #001529; // 侧边栏背景（深色主题）
$sider-text: #ffffff; // 侧边栏文字
$sider-text-hover: #1890ff; // 侧边栏文字悬浮
$sider-bg-hover: #001f3f; // 侧边栏悬浮背景
$white: #ffffff;

// 尺寸变量
$min-width: 1200px;
$header-height: 64px;
$sider-width: 240px;
$sider-collapsed-width: 80px;
$border-radius: 4px;

// 阴影变量
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
$box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
$box-shadow-active: 0 6px 24px rgba(0, 0, 0, 0.16);
$box-shadow-card:
  0 1px 2px rgba(0, 0, 0, 0.06),
  0 1px 3px rgba(0, 0, 0, 0.1);
$box-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
$box-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-xxl: 32px;

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin full-size {
  width: 100%;
  height: 100%;
}

@mixin min-width {
  min-width: $min-width;
}

@mixin card {
  background-color: $white;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: $spacing-lg;
}

@mixin custom-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

@mixin transition(
  $property: all,
  $duration: 0.3s,
  $timing: cubic-bezier(0.4, 0, 0.2, 1)
) {
  transition: $property $duration $timing;
}
